<% title t("views.tags.edit.meta.title", tag: @tag.name) %>

<main id="main-content" class="crayons-layout crayons-layout--limited-m">
  <header class="crayons-card flex items-center justify-between branded-4 p-3 pr-1 m:pr-5 m:p-6 m:pt-5" style="border-top-color: <%= @tag.bg_color_hex %>">
    <h1 class="crayons-title">
      <span class="opacity-50">#</span><%= @tag.accessible_name %>
    </h1>
    <div class="flex">
      <% if current_user.any_admin? %>
        <a href="<%= edit_admin_tag_path(@tag.id) %>" class="crayons-btn crayons-btn--ghost" data-no-instant><%= t("views.tags.edit.admin") %></a>
      <% end %>
      <a target="_blank" rel="noopener" href="https://admin.forem.com/docs/forem-basics/tags#editing-a-tag" class="crayons-btn crayons-btn--ghost"><%= t("views.tags.edit.help") %></a>
      <a href="/t/<%= @tag %>" class="crayons-btn crayons-btn--ghost"><%= t("views.tags.edit.view") %></a>
    </div>
  </header>

  <%= form_tag("/tag/#{@tag.id}", method: :patch, class: "crayons-card p-4 m:p-6 grid gap-4") do %>
    <% if flash[:success] %>
      <div class="crayons-notice crayons-notice--success">
        <%= flash[:success] %>
      </div>
    <% elsif flash[:error] %>
      <div class="crayons-notice crayons-notice--danger">
        <ul>
          <% flash[:error].each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>
    <% label_i18n = ->(param) { label_tag param, t("views.tags.edit.form.#{param}.label") } %>
    <div class="crayons-field">
      <%= label_tag :pretty_name, nil, class: "crayons-field__label" %>
      <%= text_field_tag "tag[pretty_name]", @tag.pretty_name, placeholder: t("views.tags.edit.form.pretty_name.placeholder"), class: "crayons-textfield" %>
    </div>
    <div class="flex gap-4">
      <div class="crayons-field flex-1">
        <%= label_tag :tag_bg_color_hex, I18n.t("views.tags.edit.form.bg_color_hex.label"), class: "crayons-field__label" %>
        <%= text_field_tag "tag[bg_color_hex]", @tag.bg_color_hex.presence || "#000000", placeholder: "#000000", class: "crayons-textfield", data: { color_picker: true, label_text: I18n.t("views.tags.edit.form.bg_color_hex.label") } %>
      </div>
    </div>
    <div class="crayons-field">
      <%= label_tag :short_summary, nil, class: "crayons-field__label" %>
      <%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: t("views.tags.edit.form.short_summary.placeholder"), class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= label_tag :wiki_body_markdown, nil, class: "crayons-field__label" %>
      <%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: t("views.tags.edit.form.wiki_body_markdown.placeholder"), class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= label_tag :rules_markdown, nil, class: "crayons-field__label" %>
      <%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: t("views.tags.edit.form.rules_markdown.placeholder"), class: "crayons-textfield" %>
    </div>
    <div>
      <%= submit_tag t("views.tags.edit.form.submit"), class: "crayons-btn" %>
    </div>
  <% end %>
</main>
<%= javascript_include_tag "enhanceColorPickers", defer: true %>
